<template>
    <div class="ChooseBoardWrap border-top">
      <div class="chooseBoard border-bottom">
        <ul class="btnWrap">
          <li class="btn"
              :class="{'active': item.type === TypeIndex, 'bad': item.type === 1}"
              v-for="(item, index) of arr"
              @click="changeActive(item.type)"
              :key="index">{{ item.name }}({{ number[index] }})</li>
        </ul>
        <div class="onlyContent border-top">
          <p @click="ToggleOnlyHasContent"><i :class='{active: onlyHasText}' class="iconfont icon-check"></i>只看有内容的评价</p>
        </div>
      </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'RatingsChooseBoard',
  data () {
    return {
      arr: [
        {'name': '全部', 'type': -1},
        {'name': '满意', 'type': 0},
        {'name': '不满意', 'type': 1}
      ],
      onlyHasText: false
    }
  },
  props: {
    ratings: Array
  },
  computed: {
    ...mapState({'TypeIndex': 'activeTypeIndex'}),
    number () {
      let number = []
      let rat = this.ratings
      number.push(rat.length)
      let n = 0
      let m = 0
      for (let i in rat) {
        if (rat[i].rateType === 0) {
          n++
        } else if (rat[i].rateType === 1) {
          m++
        }
      }
      number.push(n, m)
      return number
    }
  },
  methods: {
    changeActive (id) {
      this.$store.commit('changeActiveTypeIndex', id)
    },
    ToggleOnlyHasContent () {
      let onlyTxt = !this.onlyHasText
      this.onlyHasText = onlyTxt
      this.$store.commit('filterNoTxt', onlyTxt)
    }
  }
}
</script>

<style lang='scss' scoped>
  .ChooseBoardWrap {
    background: #fff;
    &.border-top::before {
      border-color: rgba(7, 17, 27, .1);
      border-width: 2px;
    }
    .chooseBoard {
      padding: 36px 36px 0 36px;
      &.border-bottom::before {
        border-color: rgba(7, 17, 27, .1)
      }
    }
    .btnWrap {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 36px;
      .btn {
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 16px 20px;
        color: rgb(77, 85, 93);
        background: #ccecf8;
        border-radius: 2px;
       &.active {
         background: #00a0dc!important;
         color: #fff;
       }
        &.bad {
          background: rgba(77, 85, 93, .2);
        }
      }
    }
    .onlyContent {
      font-size: 24px;
      padding: 24px 0;
      color: rgb(147, 153, 159);
      .icon-check {
        margin-right: 8px;
        font-size: 36px;
        color: #b7bbbf;
        vertical-align: middle;
        &.active {
          color: #25a4bb;
        }
      }
      &.border-top::before {
        border-color: rgba(7, 17, 27, .1)
      }
    }
  }
</style>
